/* 
 @description: 后台管理员

 @author: 韦淇霰

 @update: 2021年9月4日17:55:35
 */
 var token=localStorage.getItem('mytoken')
 const add= document.getElementById('add'),
  back = document.querySelector('.back'),
  submit = document.getElementById('submit'),
  closes = document.getElementById('closes'),
  search = document.querySelector('.Search'),
  name = document.getElementById('name'),
  pwd = document.getElementById('pwd'),
  table = document.getElementById('tab');

  let isEdit = 0;
  getList();
      const sou = document.querySelector('#sou');
  //搜索
  function getList(keyname='') {
      $.ajax({
      url: `http://127.0.0.1:7001/api/administrators?keyname=${keyname}`,
      method: "get",
      headers:{
         token
      },
      success: function(res) {
          console.log(res);
          localStorage.setItem('gltotal',res.count);
        $('table tbody').html('')
        table.innerHTML = `<tr class="tab_a">
                                <th>ID</th>
                                <th>用户名</th>
                                <th>密码</th>
                                <th>权限</th>
                                <th>操作</th>
                            </tr>`
              for (var i = 0; i < res.data.length; i++) {
                  // console.log(res.data[i].id);
                  const tr = document.createElement('tr');
                  for (let data in res.data[i]) {
                  const td = document.createElement("td");
                      td.innerHTML = res.data[i][data]
                      tr.appendChild(td);
                  }
                  const lasttd = document.createElement('td');
                  lasttd.innerHTML  = `<button type='button'  name="updata" class="up"  id='${res.data[i].id}'><i class="fa fa-wrench" aria-hidden="true"></i> 修改</button>
                  <button type='button' class="btn" name="delete" id='${res.data[i].id}'><i class="fa fa-trash" aria-hidden="true"></i> 删除</button>`
                  tr.appendChild(lasttd)
                  tr.id = res.data[i].id;
                  table.appendChild(tr); 
              }}
      }
  )}
  //添加
  function addLwl(data){
      $.ajax({
      url:`http://127.0.0.1:7001/api/administrators`,
      method:"post",
      data,
      headers:{
        token
     },
      success:function(res){
          if(res.code === 0){
          window.location.reload();
          closeBack();  
          }else{
              alert(res.msg);
          }
      }
  })
  }
  //删除
  function DelCa(id){
      $.ajax({
      url:`http://127.0.0.1:7001/api/administrators/${id}`,
      method:"delete",
          data:{
              id
          },
        headers:{
            token
         },
      success:function(res){
          window.location.reload();
      },
      error:()=>{
          console.log(1);
      }
  })
  }
  //编辑
  function EditCa(data,id){
      $.ajax({
      url:`http://127.0.0.1:7001/api/administrators/${id}`,
      method:"put",
      data,
      headers:{
        token
      },
      success:function(res){
          if(res.code === 0){
          //    getList();
          window.location.reload();
          closeBack();  
          }else{
              alert(res.msg);
          }
      }
  })
  }
 
//   console.log(token);
  //获取详情
  function getInfo(id){
      $.ajax({
      url:`http://127.0.0.1:7001/api/administrators/${id}`,
       headers:{
        token
      },
      method:"get",
      success:function(res){
          if(res.code === 0){
              name.value=res.data.ador_name;
          // pwd.value=res.data.ador_poss;
          }else{
              alert(res.msg)
          }
          console.log(res);
      }
      
      })
  }
  //通过事件委托操作 删除和编辑
  table.onclick = function(e){
      if(e.target.className === 'btn'){
          const flag = confirm('确定删除吗');
          if(flag==true){
              DelCa(e.target.id);
          }
      }else if(e.target.className === 'up'){
          back.style.display = 'block';
          const id  = e.target.id;
          isEdit =id;
          getInfo(isEdit);
      }
  }
  const ul =document.querySelector('.ulTag');
  //搜索按钮
  search.onclick = function(){
      ul.innerHTML='' 
      getList(sou.value);
      console.log(sou.value);
      table.innerHTML = `<tr class="tab_a">
                              <th>ID</th>
                              <th>用户名</th>
                              <th>密码</th>
                              <th>权限</th>
                              <th>操作</th>
                          </tr>`
  function ss(keyname=''){
    $.ajax({
        url: `http://127.0.0.1:7001/api/administrators?keyname=${keyname}`,
        method: "get",
        headers:{
            token
          },
        success: function(res) {
            console.log(res);
            const ul =document.querySelector('.ulTag');
            const nums = Math.ceil(res.count / 5);
            console.log(nums);
            for(let i=0;i<nums;i++){
                const li = document.createElement('li');
                ul.appendChild(li);
                li.innerHTML = `<button type="button" class="dianji">${i+1}</button>`
               
            } 
            const dianji = document.querySelectorAll('.dianji');
            for(const i of dianji){
                i.onclick = function(){
                    // ul.innerHTML=''
                    getP(i.innerHTML);
                }
            }
        }
    })
  }
  ss(sou.value);
     //分页
}

  //添加按钮
  add.onclick =function(){
      back.style.display = 'block';
      isEdit = 0;
  }
  //取消按钮
  closes.onclick = function(){
      closeBack();
  }
  function closeBack(){
      name.value = '';
      pwd.value ='';
      back.style.display = 'none';
  }
  //添加与编辑提交按钮
  submit.onclick = function(){
      if(isEdit){
          EditCa({
              ador_name : name.value,
              ador_poss : pwd.value
      },isEdit)
      }else {
          addLwl({
              ador_name : name.value,
              ador_poss : pwd.value
          })
      }
      //  window.location.reload();
  }
  
   //分页
function getPage(page) {
        $.ajax({
        url: `http://127.0.0.1:7001/api/administrators?page=${page}`,
        method: "get",
        headers:{
            token
          },
        success: function(res) {
            console.log(res);
            const ul =document.querySelector('.ulTag');
            const tab=document.querySelector('#tab');
            tab.innerHTML='';
            ul.innerHTML='';
            const tr=document.createElement('tr')
            table.innerHTML = `<tr class="tab_a">
                                    <th>ID</th>
                                    <th>用户名</th>
                                    <th>密码</th>
                                    <th>权限</th>
                                    <th>操作</th>
                                </tr>`
            for(const item of res.data){
                console.log(item);
                const tr=document.createElement('tr');
                tr.innerHTML=`<td>${item.id}</td>
                    <td>${item.ador_name}</td>
                    <td>${item.ador_poss}</td>
                    <td>${item.judge}</td>
                    <td><button type='button' name="updata" class="up"  id='${item.id}'><i class="fa fa-wrench" aria-hidden="true"></i> 修改</button>
                    <button type='button' class="btn" name="delete" id='${item.id}'><i class="fa fa-trash" aria-hidden="true"></i> 删除</button></td>
               `
               table.appendChild(tr)
            }
          
            getInfor(page)

        },
        error:()=>{
           alert('没有找到id');
        }
    }
)}
function getInfor(page=1){
    $.ajax({
        url: `http://127.0.0.1:7001/api/administrators?page=${page}`,
        method: "get",
        headers:{
            token
          },
        success: function(res) {
            console.log(res);
            const ul =document.querySelector('.ulTag');
            const num = Math.ceil(res.count / 5);
            console.log(num);
            for(let i=0;i<num;i++){
                const li = document.createElement('li');
              
                ul.appendChild(li);

                li.innerHTML = `<button type="button" class="dianji :active">${i+1}</button>`
            } 
            const dj = document.querySelectorAll('.dianji');
            for(const key of dj){
                key.onclick = function(){
                    getPage(key.innerHTML);
                    // window.location.reload();
                }
            }
        }
    })
}
getInfor();